@import "./reset";
@import "./common";
// 头部
header {
    .top {
        .Back {
            width: vw(125);
            height: vw(60);
            border: vw(4) solid rgb(255, 147, 68);
            border-radius: vw(20);
            text-align: center;
            h1 {
                font-size: vw(24);
                font-weight: normal;
                line-height: vw(52);
            }
        }
        .classify {
            font-size: vw(26);
            h2 {
                font-weight: normal;
            }
        }
    }
    // 分类列表
    .bottom {
        width: vw(710);
        margin: vw(20) auto;
        @include display-fx;
        flex-direction: column;
        align-items: center;
        .bt-list {
            width: vw(710);
            @include display-fx;
            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                &:hover a:last-of-type {
                    color: rgb(255, 147, 68);
                }
                a:first-of-type {
                    display: inline-block;
                    width: vw(150);
                    height: vw(150);
                    border-radius: 50%;
                    transition: transform 1s;
                    &:hover {
                        transform: translateY(vw(-10));
                    }
                }
                a:last-of-type {
                    color: black;
                    font-size: vw(26);
                    font-weight: normal;
                }
            }
            li:first-of-type {
                a:first-of-type {
                    background: url(../image/classify/图层-12.png) no-repeat;
                    background-size: cover;
                }
            }
            li:nth-of-type(2) {
                a:first-of-type {
                    background: url(../image/classify/图层-32.png) no-repeat;
                    background-size: cover;
                }
            }
            li:nth-of-type(3) {
                a:first-of-type {
                    background: url(../image/classify/图层-42.png) no-repeat;
                    background-size: cover;
                }
            }
            li:last-of-type {
                a:first-of-type {
                    background: url(../image/classify/图层-52.png) no-repeat;
                    background-size: cover;
                    background-position: center;
                }
            }
        }
        // 按钮
        .bt-button {
            width: vw(95);
            @include display-fx;
            margin: vw(17) 0;
            span {
                width: vw(20);
                height: vw(20);
                border-radius: 50%;
                background: rgb(255, 201, 161);
            }
            span:hover {
                background: rgb(255, 147, 68);
            }
        }
    }
}
// 主体内容
section {
    width: vw(750);
    // 美食类
    .cate {
        // 图片列表
        .list {
            width: vw(710);
            margin: vw(50) auto;
            @include display-fx;
            li {
                width: vw(132);
                height: vw(132);
                transition: transform 1s;
            }
            li:first-of-type {
                background: url(../image/classify/图层-10.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(2) {
                background: url(../image/classify/图层-13.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(3) {
                background: url(../image/classify/图层-111.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:last-of-type {
                background: url(../image/classify/图层-121.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:hover {
                transform: scale(1.2);
            }
        }
    }
    // 美食类
    .cate {
        // 图片列表
        .list {
            width: vw(710);
            margin: vw(50) auto;
            @include display-fx;
            li {
                width: vw(132);
                height: vw(132);
                transition: transform 1s;
            }
            li:first-of-type {
                background: url(../image/classify/图层-10.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(2) {
                background: url(../image/classify/图层-13.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(3) {
                background: url(../image/classify/图层-111.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:last-of-type {
                background: url(../image/classify/图层-121.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:hover {
                transform: scale(1.2);
            }
        }
    }
    // 运动类
    .exercise {
        // 图片列表
        .list {
            width: vw(710);
            margin: vw(50) auto;
            @include display-fx;
            li {
                width: vw(132);
                height: vw(132);
                transition: transform 1s;
            }
            li:first-of-type {
                background: url(../image/classify/图层-14.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(2) {
                background: url(../image/classify/图层-15.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(3) {
                background: url(../image/classify/图层-16.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:last-of-type {
                background: url(../image/classify/图层-17.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:hover {
                transform: scale(1.2);
            }
        }
    }
    // 电影类
    .film {
        // 图片列表
        .list {
            width: vw(710);
            margin: vw(50) auto;
            @include display-fx;
            li {
                width: vw(132);
                height: vw(132);
                transition: transform 1s;
            }
            li:first-of-type {
                background: url(../image/classify/图层-18.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(2) {
                background: url(../image/classify/图层-19.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:nth-of-type(3) {
                background: url(../image/classify/图层-14.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:last-of-type {
                background: url(../image/classify/图层-15.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
            li:hover {
                transform: scale(1.2);
            }
        }
    }
}